"use client";
import React, {useState} from "react";
import {Avatar, Text, Button, Paper, Card} from "@mantine/core";
import {motion} from "framer-motion";

export interface UserInfoProps {
  name: string;
  work: string;
  company: string;
  src: string;
}

export const TeamMember = ({name, work, company, src}: UserInfoProps) => {
  const [animations, setAnimations] = useState<{id: number; key: number}[]>([]);

  const handleLike = () => {
    const id = Date.now(); // 使用当前时间戳作为唯一标识
    setAnimations((prev) => [...prev, {id, key: Math.random()}]);

    setTimeout(() => {
      setAnimations((prev) => prev.filter((anim) => anim.id !== id));
    }, 1000); // 1秒后移除
  };

  return (
    <Card withBorder radius="sm">
      <Avatar src={src} size={66} radius={120} mx="auto" />
      <Text ta="center" fz="lg" fw={500} mt="md">
        {name}
      </Text>
      <Text ta="center" c="dimmed" fz="xs">
        {work}
      </Text>

      <div style={{position: "relative", display: "flex", justifyContent: "center"}}>
        <Button variant="default" fullWidth size="xs" mt="md" onClick={handleLike}>
          {company}
        </Button>

        {animations.map((animation) => (
          <motion.div
            key={animation.key}
            style={{
              position: "absolute",
              bottom: "20px", // 距离按钮的垂直距离
              display: "flex",
              justifyContent: "center", // 水平居中对齐
              alignItems: "center", // 垂直居中对齐
              whiteSpace: "nowrap", // 防止换行
            }}
            initial={{opacity: 1, y: 0}}
            animate={{opacity: 0, y: -30}} // 向上飞出
            exit={{opacity: 0, y: -30}}
            transition={{duration: 0.5}} // 动画持续时间
          >
            <span style={{fontSize: "12px"}}>👍数智化转型，感谢有你🎉</span>
          </motion.div>
        ))}
      </div>
    </Card>
  );
};
